﻿<Page x:Class="WpfAnimation.PageParallelTimeline"
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
      xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
      mc:Ignorable="d" 
      d:DesignHeight="300" d:DesignWidth="800"
	Title="PageParallelTimeline">
    <Canvas >

        <!-- TextBlock with text "ParallelTimelines are..." that gets animated. -->
        <TextBlock Name="FirstTextBlock" Canvas.Top="30" Canvas.Left="300" FontSize="24" >
        ParallelTimelines are...
        <TextBlock.RenderTransform>
          <TransformGroup>
            <SkewTransform x:Name="FirstTextBlockSkew" CenterX="25" CenterY="25" AngleX="0" AngleY="0" />
          </TransformGroup>
        </TextBlock.RenderTransform>
        </TextBlock>

        <!-- TextBlock with text "Useful" that gets animated. -->
        <TextBlock Name="SecondTextBlock" Opacity="0" Canvas.Top="109" Canvas.Left="301" FontSize="24" >
        Useful
        <TextBlock.RenderTransform>
          <TransformGroup>
            <SkewTransform x:Name="SecondTextBlockSkew" CenterX="25" CenterY="25" AngleX="0" AngleY="0" />
            <ScaleTransform x:Name="SecondTextBlockScale" CenterX="0" CenterY="24" />
          </TransformGroup>
        </TextBlock.RenderTransform>
        </TextBlock>
        <Button Canvas.Left="40" Canvas.Top="62" Content="Button" Height="23" Name="button1" Width="75" Click="button1_Click" />
        <!-- Event Trigger that controls all animations on the page. -->
        <Canvas.Triggers>
            <EventTrigger RoutedEvent="Button.Click" SourceName="button1">
                <BeginStoryboard>
                    <Storyboard>

                        <!-- "ParallelTimelines are..." fades into view. -->
                        <DoubleAnimation Storyboard.TargetName="FirstTextBlock"
              Storyboard.TargetProperty="Opacity" Duration="0:0:2" From="0" To="1" />

                        <!-- "ParallelTimelines are..." skews to the left. -->
                        <DoubleAnimation Storyboard.TargetName="FirstTextBlockSkew"
              Storyboard.TargetProperty="AngleX" Duration="0:0:2" BeginTime="0:0:2" From="0" To="45" />

                        <!-- This ParallelTimeline contains all the animations for the TextBlock with the text
              "Useful" in it. This ParallelTimeline begins 4 seconds after the Storyboard timeline begins and all child
              animations begin relative to this parent timeline. -->
                        <ParallelTimeline BeginTime="0:0:4">

                            <!-- "Useful" fades into view. -->
                            <DoubleAnimation Storyboard.TargetName="SecondTextBlock"
                Storyboard.TargetProperty="Opacity" Duration="0:0:2" From="0" To="1" />

                            <!-- "Useful" slides in from the right. -->
                            <DoubleAnimation Storyboard.TargetName="SecondTextBlockSkew"
                Storyboard.TargetProperty="AngleX" Duration="0:0:2" From="90" To="180" />

                            <!-- "Useful" skews to the right. -->
                            <DoubleAnimation Storyboard.TargetName="SecondTextBlockSkew"
                Storyboard.TargetProperty="AngleX" BeginTime="0:0:3" Duration="0:0:0.2" From="0" To="-60" />

                            <!-- "Useful" Gets taller. -->
                            <DoubleAnimation Storyboard.TargetName="SecondTextBlockScale"
                Storyboard.TargetProperty="ScaleY" BeginTime="0:0:3" Duration="0:0:0.2" From="1" To="3" />
                        </ParallelTimeline>
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger>
        </Canvas.Triggers>
        
       
    </Canvas>

</Page>
